<template>
    <div class="home">
        <section class="head">
            <div class="flex flex-align-center head-group">
                <div class="address-group">
                    <a href="javascript:;" class="address"  @click="clickSite">{{siteName}}</a>
                    <i class="icon marginL10" :class="{'icon-arrowdown': !isLogin}"></i>
                </div>
                <span class="search flex-1" @click="clickSearch">
                    <i class="icon icon-search"></i>
                    输入关键字搜索
                 </span>
            </div>
        </section>
        <!--首页通用广告start-->
        <mt-swipe class="xm-swipe" :auto="4000">
            <mt-swipe-item v-for="imgItem in images">
                <div class="bg-img" :style="imgItem.backgroundImage"  @click="openUrl(imgItem.adUrl)"></div>
            </mt-swipe-item>
        </mt-swipe>
        <!--首页通用广告end-->
        <!--首页菜单start-->
        <section class="cate-nav flex flex-pack-justify" v-show="menus.length>0">
                <router-link :to='menuItem.adUrl' class="cate-item" v-for="menuItem in menus">
                    <img :src="menuItem.adImageUrl">
                    <p>{{menuItem.name}}</p>
                </router-link>
        </section>
        <!--首页菜单end-->
        <div  v-for="item in indexFloorList">
            <section  class="img-list" v-if="item.len>1">
                <div class="flex">
                    <div class="group-left">
                        <a :href="item.p1.url"  >
                            <img :src="item.p1.imageUrl">
                        </a>
                    </div>
                    <div class="group-right">
                        <div class="group-item flex flex-align-center">
                            <a :href="item.p2.url">
                                <img :src="item.p2.imageUrl">
                            </a>
                        </div>
                        <div class="group-item flex flex-align-center  marginTop10">
                            <a :href="item.p3.url">
                                <img :src="item.p3.imageUrl">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="flex marginTop10">
                    <div class="group-left">
                        <a :href="item.p4.url"  >
                            <img :src="item.p4.imageUrl">
                        </a>
                    </div>
                    <div class="group-right flex flex-1">
                        <div class="group-item flex flex-align-center ">
                            <a :href="item.p5.url">
                                <img :src="item.p5.imageUrl">
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            <section class="ad-list"  v-if="item.len==1">
                <a :href="item.p1.url" >
                    <img :src="item.p1.imageUrl">
                </a>
            </section>
        </div>
        <section class="like-goods">
            <div class="tit">
                <span>为您推荐</span>
            </div>
            <!--数据联调-->
            <ul class="cate-list flex">
                <li v-for="item in guessYouLikeList" @click="detail(item.id)">
                    <div class="cell-img">
                        <img :src="item.imageThumb">
                    </div>
                    <div class="cell-info">
                        <h3>{{item.name}}</h3>
                        <div class="price">
                            <span v-if="isLogin">￥<em>{{item.priceUnit_int}}</em>.{{item.priceUnit_float}}/件</span>
                            <span v-if="!isLogin" @click.stop="toLogin">登录查看</span>
                            <i class="fr">{{item.numberPerBox}}{{item.unitName}}/件</i>
                        </div>
                        <div class="cell-tags">
                            <span class="zy" v-show="item.supplierTypeId==1">自营</span>
                            <span v-show="item.numberInventory>0">现货</span>
                            <span v-show="item.pandaCoinStatus!=-1">熊猫币</span>
                            <span v-show="item.openPresale>0">可预售</span>
                        </div>
                        <p class="company" @click.stop="enterStore(item.supplierId)">
                            <i class="icon icon-dianpu5"></i>{{item.supplierName}}
                        </p>
                    </div>
                </li>
            </ul>
        </section>
        <section>
            <div class="tit">
                老板，已经到底了，查看更多商品进入分类页面
            </div>
        </section>

        <div class="pop-bottom-group" v-show="isPopBottom">
            <div class="pop-bottom-list">
                <div class="item border-bottom" v-for="item in siteList" @click="selectSite(item)">{{item.siteName}}</div>
            </div>
            <div class="item opt" @click="isPopBottom=false"> 取消 </div>
        </div>
        <div class="fade" v-show="isPopBottom" @click="isPopBottom=false"></div>

        <div class="foot-blank"></div>
        <footBar curPage="home"></footBar>
        <!--<xm-loading v-show="loading"></xm-loading>x-->

    </div>
</template>
<script>
    export default {
        props: {
        },
        data() {
            return {
                images: [],
                menus:[],
                isLogin: !!Cookie.get('name'),
                siteId: null,
                siteName: '重庆站',
                loading: true,
                indexFloorList: {},
                guessYouLikeList: {},
                siteList: [],
                isPopBottom: false,
                inderFloor:{}
            }
        },
        methods: {
            //点击搜索
            clickSearch(){
                this.$router.push({name: 'search', params: {}});
            },
            /**
             * 跳转登录页面
             * */
            toLogin(){
                this.$router.push({name: 'login'});
            },
            //查看商品详情
            detail(goodsId){
                this.$router.push({name: 'goodsDetail', params: {wareId: goodsId}});
            },
            //获取首页信息
            getImages(){
                this.images = [];
                adImageList({siteId: this.siteId}).then(data=>{
                    if(data.returnCode == '000000'){
                        this.images = data.result.adImageList;
                        this.images.forEach(item=>{
                            item.backgroundImage = { backgroundImage: 'url(' + item.adImageUrl + ')'};
                        })
                    }
                })
            },
            //获取首页菜单
            getMenus() {
                this.menus = [];
                mainMenuList({siteId: this.siteId}).then(data => {
                    if (data.returnCode == '000000') {
                        this.menus = data.result.adMenuList;
                        this.menus.forEach(item => {
                            item.backgroundImage = {backgroundImage: 'url(' + item.adImageUrl + ')'};
                        })
                    }
                })
            },
            //获取站点列表
            getSiteList(){
                getSiteList().then(data =>{
                    if(data.returnCode == '000000'){
                        this.siteList = data.result.siteList;
                        if(!Cookie.get('siteName') || Cookie.get('siteName') == ''){
                            this.siteId = data.result.siteList[0].siteId;
                            this.siteName = data.result.siteList[0].siteName;
                            Cookie.set('siteId', this.siteId);
                            Cookie.set('siteName', this.siteName);
                        }
                        this.getImages();
                        this.getMenus();
                        this.getFloorList();
                        this.getGuessYouLikeList();
                    }
                })
            },
            // 获取楼层数据(多格)
            getFloorList(){
                this.indexFloorList = [];
                getFloorList({siteId: this.siteId}).then(data=>{
                    this.loading = false;
                    if(data.returnCode == '000000'){
                        this.indexFloorList = data.result.indexFloorList.map(item=>{
                            let json = {};
                            item.floorImgList.forEach(img=>{
                                json['p' + img.position] = {
                                    imageUrl: img.imageUrl,
                                    url: img.url
                                }
                            });
                            json.len= item.floorImgList.length;
                            return json;
                        });
                        console.log(this.indexFloorList);
                    }
                })
            },

            //猜您喜欢
            getGuessYouLikeList(){
                this.guessYouLikeList = [];
                getGuessYouLikeList({siteId: this.siteId}).then(data=>{
                    if(data.returnCode == '000000'){
                        this.guessYouLikeList = data.result.guessYouLikeList;
                    }
                })
            },
            /**
             * 加入购物车
             * @param <number> 商品id
             * */
            addPurchase(goodId){
                this.$router.push({name: 'purchase', params: {goodId: goodId}});
            },
            //点击切换站点
            clickSite(){
                //登录后不能切换站点
                if(Cookie.get('name')){
                    return;
                }
                this.isPopBottom = !this.isPopBottom;
            },
            /**
             * 选择站点
             * @param <object>
             * */
            selectSite(item){
                this.siteId = item.siteId;
                this.siteName = item.siteName;
                Cookie.set('siteId', item.siteId);
                Cookie.set('siteName', item.siteName);
                this.isPopBottom = false;
                this.getImages();
                this.getMenus();
                this.getFloorList();
                this.getGuessYouLikeList();
            },
            /**
             * 打开地址
             * @param <string> url
             * */
            openUrl(url){
                location.href = url;
            },
            /**
             * 博物馆
             * */
            toMuseum(){
                if(Cookie.get('siteId')==1){
                    this.$router.push({name: 'museum'});
                }else{
                    this.$router.push({name: 'build'});
                }
            },
            // 进入商店
            enterStore: function(supplierId){
                this.$router.push({name: 'store', params: {storeId: supplierId}});
            }
        },
        created() {
            let siteId = Cookie.get('siteId');
            if(siteId && siteId!=''&&Cookie.get('siteName')){
                this.siteId = Cookie.get('siteId');
                this.siteName = Cookie.get('siteName');
            }else{
               // this.popup.visible = true;
            }
            this.getSiteList();
        },
        mounted(){
        },
        components: {
        }
    };
</script>
<style lang="less" scoped>
    @import "./home.less";
</style>
